<!-- 内容部分 -->
<template>
  <div class="category-content">
    <div class="category-left">
      <ul>
        <li
          :class="{ active: catId == item.cat_id }"
          v-for="(item, index) in categoryLeftDates"
          :key="index"
          @click="changeLeftTab(item.cat_id)"
        >
          {{ item.cat_name }}
        </li>
      </ul>
    </div>
    <Loading v-if="showHideLoading" />
    <div class="category-right" v-else>
      <div class="wrap">
        <div class="ad">
          <img
            src="https://x.dscmall.cn/storage/data/touch_catads/15630384831872.jpg"
            alt
          />
        </div>
        <ul class="category-list">
          <li v-for="(item, index) in categoryRightDatas" :key="index">
            <h3>{{ item.cat_name }}</h3>
            <ul class="child-list">
              <router-link
                :to="'/categorylist/' + categoryRight.cat_id"
                tag="li"
                v-for="(categoryRight, index) in item.child"
                :key="index"
              >
                <img :src="categoryRight.touch_icon" alt />
                <p>{{ categoryRight.cat_name }}</p>
              </router-link>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Loading from "@/components/Loading/Loading";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Loading,
  },
  data() {
    //这里存放数据
    return {
      catId: "858",
    };
  },
  computed: {
    categoryLeftDates() {
      return this.$store.state.categoryLeftDatas;
    },
    categoryRightDatas() {
      return this.$store.state.categoryRightDatas;
    },
    showHideLoading() {
      return this.$store.state.isLoading;
    },
  },
  methods: {
    changeLeftTab(cat_id) {
      // console.log(cat_id);
      this.catId = cat_id;
      this.$store.dispatch("actChangeCategoryRightDatas", cat_id);
    },
  },
  mounted() {
    this.$store.dispatch("actChangeCategoryLeftDatas");
    this.$store.dispatch("actChangeCategoryRightDatas", "858");
  },
};
</script>
<style lang="less">
.category-content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 4.4rem;
  bottom: 5rem;
  left: 0;
  right: 0;
  background: #fff;
  height: calc(100% - 9.4rem);
  display: flex;
  justify-content: space-between;
  .category-left {
    width: 8.4rem;
    height: 100%;
    background: #efefef;
    ul {
      li {
        height: 3.8rem;
        line-height: 3.8rem;
        font-size: 1.4rem;
        text-align: center;
      }
      .active {
        background: #fff;
        color: #f55;
      }
    }
  }
  .category-right {
    width: 100%;
    width: calc(100% - 8.4rem);
    height: 100%;
    background: #fff;
    overflow-y: auto;
    .wrap {
      .ad {
        width: 94%;
        margin-left: 3%;
        img {
          margin-top: 1rem;
          width: 100%;
        }
      }
      .category-list {
        li {
          h3 {
            text-align: center;
            height: 4.4rem;
            line-height: 4.4rem;
            font-size: 1.4rem;
            color: #666;

            &::before {
              content: "—";
              color: #ccc;
              margin-right: 1rem;
            }
            &::after {
              content: "—";
              color: #ccc;
              margin-left: 1rem;
            }
          }
          .child-list {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            text-align: center;
            justify-content: flex-start;
            li {
              width: 33%;
              img {
                height: 5.2rem;
                width: 5.2rem;
              }
              p {
                line-height: 3rem;
              }
            }
          }
        }
      }
    }
  }
}
</style>